<template>
  <div class="hot-topic" @click="topicTodetail(tabId,topicItem)">
    <img style="max-width: 100%" v-lazy="topicimg" class="hot-topic-img" />
    <div class="word-background">
      <div v-if="topictype==1||topictype==null" class="topic-big-title"><span class="font-smoothing">{{title}}</span></div>
      <div v-if="topictype==1||topictype==null" class="topic-small-title"><span class="font-smoothing">{{abbreviations}}</span></div>
      <div class="topic-attention-num"><span class="font-smoothing" style="font-family: Arial">{{followNumber}}人关注 >></span></div>
    </div>
  </div>
</template>
<script>
  export default {
    props:['topictype','followNumber','title','abbreviations','topicimg',"tabId","topicItem"],
    methods:{
      topicTodetail(tabId,topicItem){
          this.$emit("topicback",{tabId:tabId,topicItem:topicItem}) 
      }
    }
  }
</script>
<style scoped>
  .hot-topic{
    width: 100%;
    height: 160px;
    overflow: hidden;
     position: relative;
  }
  .hot-topic-img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 160px; 
  }

  .topic-big-title{
    text-align: center;
    top: 0.74rem;
    position: absolute;
    width: 100%;
    font-size: 0.34rem;
    color: #ffffff;
    font-weight: bold;
  }
  .topic-small-title{
    text-align: center;
    top: 1.35rem;
    position: absolute;
    width: 100%;
    font-size: 0.26rem;
    color: #ffffff;
  }
  .topic-attention-num{
    text-align: center;
    top: 2.21rem;
    position: absolute;
    width: 100%;
    font-size: 0.24rem;
    color: #ffffff;
  }
  .font-smoothing{
    -webkit-font-smoothing:antialiased;
  }
  .word-background{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(90,90,90,.3);
  }
</style>
